// 1.实现 鼠标移入 产品区域 黄色放大区域显示 
// 2.让遮罩层跟随鼠标移动 1.设置遮罩层的位置  2.需要把鼠标放在遮罩层中间；
// 3.遮罩层 需要边界 ；


//切换图片
let showEle = document.querySelector(".show");
//获取遮罩层
let maskEle = document.querySelector(".mask");
//获取box 元素
let boxEle = document.querySelector(".box");
// 获得放大镜区域元素
let enlargeEle=document.querySelector(".enlarge");
//获取切换的小图
let smallImgEles = document.querySelectorAll(".list p")
let showImg = document.querySelector("img")

smallImgEles.forEach((img,key)=>{
    img.onclick=function(){
        console.log(key);
        // 改变上面的图
        showImg.src=`../images/${key+1}.jpg`;
        // 改变放大区域的图
        enlargeEle.style.backgroundImage = `url(../images/${key+1}.big.jpg)`;
    }
})
showEle.onmousemove=function(e){
    // 显示遮罩层
    maskEle.style.display="block";
    // 获取鼠标相对于浏览器的位置
    var x=e.clientX - boxEle.offsetLeft;
    var y=e.clientY - boxEle.offsetTop;
    // console.log(x,y);
    // 把遮罩层设置到x 和 y 的位置
    let sx = x - maskEle.offsetWidth/2;
    let sy = y - maskEle.offsetHeight/2;
    // 边界的判断
    // 左边边界
    if(sx<0){
        sx=0;
    }
    // 上面边界
    if(sy<0){
        sy=0;
    }
    // 下面的边界
    if(sx>showEle.offsetWidth-maskEle.offsetWidth){
         sx = showEle.offsetWidth-maskEle.offsetWidth;
    }
    if(sy>showEle.offsetHeight-maskEle.offsetHeight){
            sy = showEle.offsetHeight-maskEle.offsetHeight;
    }
    maskEle.style.left = sx + "px";
    maskEle.style.top = sy + "px";

    //计算 x=sx  y=sy
    var showW=showEle.offsetWidth;
    var showH=showEle.offsetHeight;

    let str = getComputedStyle(enlargeEle)[`background-size`];
    var arr = str.split(" ");
    var bw = parseInt(arr[0]);
    var bh = parseInt(arr[1]);
    var xx = (sx/showW)*bw;
    var yy = (sy/showH)*bh;
    enlargeEle.style.backgroundPosition = `-${xx}px -${yy}px`
    }

    //移入show区域  放大镜要显示
    showEle.onmouseenter =function(){
        enlargeEle.style.display="block";
    }
    showEle.onmouseleave =function(){
        maskEle.style.display="none"
        enlargeEle.style.display="none"
    }
